@import './iconfont.scss';
.tab-view {
	width: 750rpx;
	height: 72rpx;
	display: flex;
	flex-direction: row;
	background-color: #007AFF;
	
	&-item {
		flex: 1;
		font-size: 28rpx;
		line-height: 68rpx;
		text-align: center;
		color: #FFFFFF;
		.iconfont {
			vertical-align: middle;
		}
		
		&--text {
			display: inline-flex;
			align-items: flex-end;
		}
		
		&.active {
			.tab-view-item--text {
				border-bottom: 4rpx solid #FFFFFF;
			}
		}
	}
}

.swiper {
	&-view {
		height: 360rpx;
		
		&--image {
			width: 100%;
			height: 360rpx;
		}
	}
	
	&-box {
		flex: 1;
	}
	
	&-item {
		flex: 1;
		flex-direction: row;
		overflow-y: auto;
	}
}

.section {
	background-color: #FFFFFF;
	
	&-header {
		min-height: 88rpx;
		padding: 0 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	&-prefix {
		width: 10rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: #007AFF;
	}
	&-title {
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
	}
	&-suffix {
		font-size: 26rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}
	
	&-body {
		padding: 0 6px;
	}
}

.scroll-view {
	&-h {
		padding-bottom: 12rpx;
		white-space: nowrap;
		width: 100%;
	}
	
	&-item {
		box-sizing: border-box;
		display: inline-block;
		overflow: hidden;
	}
}

.subject {
	&-card {
		padding: 0 12rpx;
		display: flex;
		flex-direction: column;
	}
	
	&-mask {
		position: relative;
		height: 216rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	&-cover {
		width: 100%;
		height: 100%;
	}
	
	&-text {
		height: 56rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		font-size: 28rpx;
		line-height: 56rpx;
		color: #FFFFFF;
		text-align: center;
		background-color: rgba(0, 0, 0, .36);
	}
	
	&-title,
	&-subtitle {
		white-space: initial;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	
	&-title {
		font-size: 16px;
		line-height: 48rpx;
		color: #333333;
		height: 48rpx;
	}
	
	&-subtitle {
		padding: 8rpx 0;
		font-size: 14px;
		line-height: 40rpx;
		color: #999999;
		height: 72rpx;
	}
	
	&-info {
		padding-bottom: 12rpx;
		height: 64rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
	}
	
	&-avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
	}
	
	&-item {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		
		&-header,
		&-footer {
			height: 72rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-left {
			font-size: 28rpx;
			color: #333333;
		}
		&-right {
			font-size: 26rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}
		
		&-body {
			padding: 0 24rpx;
			display: flex;
			align-items: center;
		}
		&-cover {
			flex: 0 0 256rpx;
			height: 186rpx;
			border-radius: 8rpx;
		}
		&-author,
		.subject-title {
			font-size: 30rpx;
		}
		&-author {
			margin-top: 12rpx;
			.sec-left {
				color: #999999;
			}
		}
		&-book {
			font-size: 30rpx;
			color: #007AFF;
		}
	}
	
	&-banner {
		position: relative;
		
		&-mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .3);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		&-image {
			width: 340rpx;
			height: 346rpx;
		}
	}
}

.task {
	&-list {
		padding: 0 24rpx;
	}
	&-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		&-content {
			font-size: 30rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}
		
		&-action {
			font-size: 28rpx;
			color: #007AFF;
			display: flex;
			align-items: center;
		}
		
		&-v {
			background-color: #FFFFFF;
		}
		
		&-header {
			padding: 12rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-info {
			display: flex;
			align-items: center;
		}
		&-date {
			font-size: 30rpx;
		}
		&-author {
			font-size: 24rpx;
			color: #666666;
		}
		&-status {
			height: 44rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
			line-height: 44rpx;
			color: #FFFFFF;
			background-color: #CCCCCC;
			border-radius: 22rpx;
			
			&.published {
				background-color: #007AFF;
			}
		}
		&-right {
			font-size: 26rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}
		
		&-body {
			padding: 0 24rpx;
		}
		&-content {
			font-size: 28rpx;
			color: #333333;
			white-space: initial;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		
		&-deadline {
			font-size: 26rpx;
			line-height: 44rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}
		
		&-footer {
			height: 72rpx;
			padding: 0 24rpx;
			color: #007AFF;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}

.message {
	&-item {
		background-color: #FFFFFF;
		&-header,
		&-footer {
			height: 72rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
		}
		
		&-header {
			font-size: 30rpx;
		}
		
		&-body {
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333333;
		}
		
		&-footer {
			color: #999999;
		}
	}
	
	&-header {
		padding: 0 24rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	
	&-time {
		padding: 0 24rpx;
		font-size: 26rpx;
		color: #999999;
	}
}

.list {
	&-card {
		display: flex;
		&-cover {
			width: 108rpx;
			height: 108rpx;
			background-color: #EEEEEE;
		}
		
		&-content {
			flex: 1;
		}
		&-title {
			height: 64rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 64rpx;
			color: #333333;
		}
		&-subtitle {
			color: #666666;
		}
		&-header {
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-time {
			font-size: 26rpx;
			color: #999999;
		}
		&-body {
			font-size: 28rpx;
			color: #666666;
		}
		
		&-footer {
			height: 72rpx;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		
		&-slot {
			padding: 8rpx 24rpx;
			background-color: #F8F8F8;
			border-radius: 8rpx;
		}
	}
	
	&-slot {
		&-item {
			padding: 8rpx 0;
			font-size: 26rpx;
			color: #666666;
		}
		
		&-name {
			color: #999999;
		}
	}
	
	&-grid {
		margin: 6rpx -6rpx;
		&-item {
			width: 100%;
			height: 100%;
			padding: 6rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			.subject-cover {
				border-radius: 8rpx;
			}
		}
	}
	
	&-item {
		padding: 12rpx 0;
		display: flex;
		align-items: center;
		&-icon {
			position: relative;
			width: 88rpx;
			font-size: 24px;
			text-align: center;
			.iconfont {
				font-size: 36px;
			}
		}
		&-rank {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			z-index: 1;
			color: #666666;
			align-items: center;
			justify-content: center;
		}
		&.with-icon {
			.list-item-rank {
				color: #FFFFFF;
			}
		}
		
		&-content {
			display: flex;
			align-items: center;
		}
		&-cover {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}
		&-avatar {
			width: 100%;
			height: 100%;
		}
		&-title {
			font-size: 30rpx;
			// font-weight: 500;
			color: #333333;
		}
		&-text {
			font-size: 28rpx;
			color: #999999;
		}
		
		&-large {
			height: 128rpx;
			padding: 24rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 12rpx;
		}
	}
}

.resource {
	&-item {
		display: flex;
		flex-direction: column;
		&-cover {
			width: 100%;
			height: 320rpx;
		}
		&-text {
			height: 72rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-container {
			position: relative;
			height: 320rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
		&-mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .3);
			display: flex;
			align-items: center;
			justify-content: center;
			
			&--text {
				height: 64rpx;
				color: #FFFFFF;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .3);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		&-footer {
			height: 72rpx;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
}

.profile {
	&-banner {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		
		&-avatar {
			margin-top: -84rpx;
			text-align: center;
		}
		
		&-cover {
			width: 128rpx;
			height: 128rpx;
			&.border-circle {
				border: 4rpx solid #FFFFFF;
			}
		}
		
		&-text {
			font-size: 30rpx;
			color: #333333;
		}
	}
	
	&-rank {
		&-banner {
			height: 108rpx;
			position: relative;
			margin-top: -60rpx;
			text-align: center;
		}
		
		&-cover {
			height: 108rpx;
			&.border-circle {
				border: 4rpx solid #FFFFFF;
			}
		}
		&-text {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
	
	&-item {
		text-align: center;
		&-stat {
			font-size: 30rpx;
			color: #333333;
		}
		
		&-text {
			font-size: 28rpx;
			color: #999999;
			text-align: center;
		}
		
		&-v {
			display: flex;
			align-items: center;
		}
	}
}

.fixed-action {
	height: 88rpx;
	position: fixed;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1px solid #EEEEEE;
	background-color: #FFFFFF;
	&.bottom {
		bottom: 0;
	}
}

.publish {
	&-pop {
		max-height: 80vh;
		min-height: 60vh;
		background-color: #FFFFFF;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	
	&-header {
		height: 88rpx;
		padding: 0 24rpx;
		font-size: 30rpx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.iconfont {
			color: #999999;
		}
	}
	&-text {
		color: #007AFF;
	}
	
	&-body {
		padding: 24rpx 24rpx 0;
		display: flex;
		flex-direction: column;
	}
	
	&-textarea {
		width: 100%;
	}
	
	&-image {
		width: 100%;
		height: 100%;
		background-color: #EEEEEE;
		border-radius: 8rpx;
		
		&-area {
			padding: 12rpx;
		}
		
		&-item {
			padding: 12rpx;
			box-sizing: border-box;
		}
	}
}

.form {
	&-control {
		padding: 24rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		
		&-button {
			margin-top: 88rpx;
		}
	}
	
	&-item {
		position: relative;
		display: flex;
		align-items: center;
		height: 88rpx;
		border-bottom: 1px solid #EEEEEE;
		
		&-input {
			height: 64rpx;
			font-size: 28rpx;
			line-height: 64rpx;
			flex: 1;
		}
	}
	
	&-button {
		height: 88rpx;
		font-size: 30rpx;
		line-height: 88rpx;
		color: #FFFFFF;
		background-color: #007AFF;
	}
}

.popup {
	padding: 0 24rpx;
	font-size: 28rpx;
	color: #333333;
	border-radius: 8rpx;
	background-color: #FFFFFF;
	box-shadow: 0 0 24rpx rgba(0, 0, 0, .3);
	
	&-input {
		position: relative;
		width: 80vw;
		min-height: 88rpx;
		
		.icon-close {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
		}
	}
}

.history {
	&-item {
		height: 44rpx;
		padding: 0 24rpx;
		margin: 6rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 44rpx;
		background-color: #EEEEEE;
		display: inline-block;
		border-radius: 22rpx;
	}
}

.btn {
	padding: 0 24rpx;
	height: 48rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 48rpx;
	display: inline-block;
	border-radius: 24rpx;
	
	&.large {
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
	}
	
	&-primary {
		background-color: #007AFF;
	}
}

.detail {
	&-content {
		padding: 0 24rpx;
		color: #333333;
	}
	
	&-white {
		background-color: #FFFFFF;
	}
}

.empty-text {
	height: 72rpx;
	font-size: 28rpx;
	color: #999999;
	line-height: 72rpx;
	text-align: center;
}

.line-clamp {
	&-1 {
		-webkit-line-clamp: 1;
	}
	
	&-2 {
		-webkit-line-clamp: 2;
	}
}

.sec {
	&-top {
		margin-top: 24rpx;
	}
	&-left {
		margin-left: 12rpx;
	}
}

.border-dashed {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #EEEEEE;
	border-radius: 8rpx;
}

.border {
	border-bottom: 1px solid #EEEEEE;
	
	&-left {
		border-left: 1px solid #EEEEEE;
	}
}

.border-radius {
	border-radius: 50%;
}

.padding {
	padding: 0 24rpx;
	
	&-all {
		padding: 24rpx;
	}
	
	&-small {
		padding: 6rpx;
	}
}

.box-shadow {
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, .1);
}

.flex-center {
	display: flex;
	justify-content: center;
}

.iconfont {
	&.large {
		font-size: 32px;
		color: #007AFF;
	}
	&.middle {
		font-size: 24px;
		color: #007AFF;
	}
}

.text {
	&-primary {
		color: #007AFF;
	}
	&-custom {
		color: #999999;
	}
}

.shim {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	&-small {
		height: 24rpx;
	}
	
	&-large {
		height: 108rpx;
	}
}

uni-switch .uni-switch-input {
	margin-right: 0;
}
